{{ header }}{{ column_left }}
<div id="content" class="frm-container">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-right">
        <button type="submit" form="form-banner" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fas fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-light"><i class="fas fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
      <div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> {{ error_warning }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}
    {% if success %}
      <div class="alert alert-success alert-dismissible"><i class="fas fa-check-circle"></i> {{ success }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    {% endif %}

    <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-menu" class="form-horizontal">
      <div class="row">

        <div class="col-lg-3 col-md-12 order-lg-1 d-none d-lg-block mb-3">
          <div class="card">
            
            <div class="card-body">
              <div class="form-group">
                <label class="col-sm-12" for="input-menu-name">{{ entry_menu_name }}</label>
                <div class="col-sm-12">
                  <input id="input-menu-name" type="text" name="name" class="form-control" value="{{ name }}" />
                  {% if error_name %}
                  <div class="text-danger">{{ error_name }}</div>
                  {% endif %}
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-12" for="input-menu-status">{{ entry_status }}</label>
                <div class="col-sm-12">
                  <select name="status" id="input-menu-status" class="form-control">
                    {% if status %}
                    <option value="1" selected="selected">{{ text_enabled }}</option>
                    <option value="0">{{ text_disabled }}</option>
                    {% else %}
                    <option value="1">{{ text_enabled }}</option>
                    <option value="0" selected="selected">{{ text_disabled }}</option>
                    {% endif %}
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-12" for="input-menu-type">{{ entry_menu_type }}</label>
                <div class="col-sm-12">
                  <select name="menu_type" id="input-menu-type" class="form-control">
                    <option value="horizontal" {% if menu_type == 'horizontal' %} selected="selected" {% endif %}>{{ text_horizontal }}</option>
                    <option value="vertical" {% if menu_type == 'vertical' %} selected="selected" {% endif %}>{{ text_vertical }}</option>
                    <option value="mobile" {% if menu_type == 'mobile' %} selected="selected" {% endif %}>{{ text_mobile }}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-9 col-md-12 order-lg-2 frm-right">
          <div class="card">
            
            <div class="card-body">
              <div class="form-group">
                <div class="row">
                <div class="col-sm-6 col-text"><h4>{{ text_menu_item_settings }}</h4></div>
                <div class="col-sm-6 control-label col-btn">
                  <button type="button" class="btn btn-primary" onclick="mccmenu.appendTopItemNewForm('{{ top_items_form_url }}')"><i class="fas fa-plus"></i> {{ text_add_top_item }}</button>
                  <button type="button" class="btn btn-primary btn-delete" onclick="mccmenu.deleteCheckItems()"><i class="fas fa-trash"></i> {{ text_delete_items }}</button>
                </div>
                </div>
              </div>
              
              <div class="form-group">
                <div class="menu_item_container">
                  {% if top_items %}
                  <div class="top_item_container top_sortable">
                    {% for top_item in top_items %}
                    <div class="top_item_content">
                      <div class="top_item item row">
                        <div class="del-name col-sm-6">
                          <div class="del-action">
                            <input type="checkbox" class="ck-del top-ck-del" value="{{ top_item.menu_item_id }}" />
                          </div>
                          <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                          <div class="name">
                            <span>{{ top_item.name }}</span>
                          </div>
                        </div>
                        <div class="action col-sm-6">
                          <a href="javascript:void(0)" onclick="mccmenu.appendTopItemNewForm('{{ top_item.url }}')" class="a-config"><i class="fas fa-edit"></i> Edit</a>
                          <a href="javascript:void(0)" onclick="mccmenu.deleteMenuItem('{{ top_item.del_url }}')" class="a-delete"><i class="fas fa-trash"> Delete</i></a>
                          <a href="javascript:void(0)" onclick="mccmenu.appendAddSubItemForm('{{ top_item.menu_item_id }}', '2')" class="a-config"><i class="fas fa-plus"></i> {{ text_add_sub_item }}</a>
                        </div>
                      </div>
                      
                      {% if top_item.sub_items %}
                      <div class="second_item_container second_sortable">
                        {% for sub_item in top_item.sub_items %}
                        <div class="second_item_content">
                          <div class="second_item item row">
                            <div class="del-name col-sm-6">
                              <div class="del-action">
                                <input type="checkbox" class="ck-del sub-ck-del" value="{{ sub_item.item_id }}" />
                              </div>
                              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                              <div class="name">
                                <span>{{ sub_item.name }}</span>
                              </div>
                            </div>
                            <div class="action col-sm-6">
                              <a href="javascript:void(0)" onclick="mccmenu.appendEditSubItemForm('{{ sub_item.item_id }}')" class="a-config"><i class="fas fa-edit"></i> Edit</a>
                              <a href="javascript:void(0)" onclick="mccmenu.deleteMenuItem('{{ sub_item.del_url }}')" class="a-delete"><i class="fas fa-trash"></i> Delete</a>
                              <a href="javascript:void(0)" onclick="mccmenu.appendAddSubItemForm('{{ sub_item.item_id }}', '3')" class="a-config"><i class="fas fa-plus"></i> {{ text_add_sub_item }}</a>
                            </div>
                          </div>
                          
                          {% if sub_item.sub_items %}
                            <div class="third_item_container third_sortable">
                              {% for s_item in sub_item.sub_items %}
                              <div class="third_item_content">
                                <div class="third_item item row">
                                  <div class="del-name col-sm-6">
                                    <div class="del-action">
                                      <input type="checkbox" class="ck-del sub-ck-del" value="{{ s_item.item_id }}" />
                                    </div>
                                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                                    <div class="name">
                                      <span>{{ s_item.name }}</span>
                                    </div>
                                  </div>
                                  <div class="action col-sm-6">
                                    <a href="javascript:void(0)" onclick="mccmenu.appendEditSubItemForm('{{ s_item.item_id }}')" class="a-config"><i class="fas fa-edit"></i> Edit</a>
                                    <a href="javascript:void(0)" onclick="mccmenu.deleteMenuItem('{{ s_item.del_url }}')" class="a-delete"><i class="fa fa-trash"></i></a>
                                  </div>
                                </div>
                            
                                <input type="hidden" class="sub-item-position3" name="sub_item_position3[{{ s_item.item_id }}]" value="{{ s_item.position }}" />
                              </div>
                              {% endfor %}
                            </div>
                            {% endif %}
                            <input type="hidden" class="sub-item-position2" name="sub_item_position2[{{ sub_item.item_id }}]" value="{{ sub_item.position }}" />
                          </div>
                          {% endfor %}
                        </div>
                        {% endif %}
                        <input type="hidden" class="top-item-position" name="top_item_position[{{ top_item.menu_item_id }}]" value="{{ top_item.position }}" />
                      </div>
                      {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-center">{{ text_no_items }}</p>
                    {% endif %}
                  </div>
                </div>
            
              </div>
            </div>
          </div>
        </div>
      </form>
  </div>
</div>

<input type="hidden" id="sub-item-form-url" value="{{ sub_item_add_form_url }}" />
                <input type="hidden" id="sub-item-edit-form-url" value="{{ sub_item_edit_form_url }}" />
                <input type="hidden" id="get-top-item-url" value="{{ get_top_items_url }}" />
                <input type="hidden" id="multiple-del-url" value="{{ multiple_del_url }}" />
                <input type="hidden" id="input-add-sub-item" value="{{ text_add_sub_item }}" />
                <input type="hidden" id="text-show-image" value="{{ text_show_image }}" />
                <input type="hidden" id="text-show-child" value="{{ text_show_child }}" />
                <input type="hidden" id="text-success-item" value="{{ text_success_item }}" />
                <input type="hidden" id="text-choose-category" value="{{ text_choose_category }}" />
                <input type="hidden" id="text-choose-product" value="{{ text_choose_product }}" />
                <input type="hidden" id="text-user-token" value="{{ user_token }}" />
                <input type="hidden" id="text-title" value="{{ text_title }}" />
                <input type="hidden" id="text-link" value="{{ text_link }}" />
                <input type="hidden" id="text-html" value="{{ text_html }}" />
                <input type="hidden" id="text-hide-title" value="{{ text_hide_title }}" />
                <input type="hidden" id="text-confirm-delete" value="{{ text_confirm_delete }}" />
                <input type="hidden" id="text-confirm-multiple-delete" value="{{ text_confirm_multiple_delete }}" />
                <input type="hidden" id="text-choose-delete" value="{{ text_choose_delete_items }}" />
                <input type="hidden" id="text-no-items" value="{{ text_no_items }}" />
                <input type="hidden" id="text-no-children-items" value="{{ text_no_children_items }}" />
                <div id="form-container-bg"></div>
                <div id="form-ajax-loader"><img src="{{ loader_image }}" class="ajax-loader-img" /></div>
                <div id="form-container"></div>

{{ footer }}